<template>
  <el-select v-model="value" placeholder="Select" style="width: 240px">
    <template #label="option">{{ option }}</template>
    <el-option
      v-for="item in options"  
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-select>
</template>

<script setup>
/*
方案1: 插槽处理 <template #label="option">{{ option }}</template>
方案2: 提供源码需要的指定数据 label: form.name
*/
import { reactive, ref, computed } from 'vue'

const options = ref([])  

const form = reactive({
  userId: 1,
  userName: '张三',
})

const labelKey = 'userName'
const valueKey = 'userId'

// 单选处理
const value = computed({
  get() {
    return {
      ...form,
      value: form[valueKey],
      label: form[labelKey]
    }
  },
  set(v) {
    form[valueKey] = v.id
    form[labelKey] = v.name
  }
  
})

// 多选处理
const values = computed({
  get(){
    return form.users?.map(form => ({
      ...form,
      id: form.id,
      label: form.name
    }))
  },
  set(v){
    form.users = v
  }
})

// 模拟异步数据加载
setTimeout(() => {
  options.value = [ 
    { value: 1, label: 'label1' },
    { value: 2, label: 'label2' },
    { value: 3, label: 'label3' },
    { value: 4, label: 'label4' },
    { value: 5, label: 'label5' }
  ]
}, 3000)
</script>